<!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                视频管理
                <small>控制视频流的调度，监控教室教学视频
                </small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-gears"></i> 视频管理</a></li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">远程设备列表 </h3>
                            <a class="btn btn-warning btn-flat pull-right" data-toggle="modal" data-target="#pullModal" (click)="getBuildClass(0,$event,'multiple')">多教室播放视频</a>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="example2" class="table table-bordered table-hover" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="5">
                                <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>教室</th>
                                    <th>状态</th>
                                    <th>推送操作</th>
                                    <th>播放操作</th>
                                    <th>广播</th>
                                    <th>监控</th>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let device of mf.data">
                                        <td>
                                            <div class="checkbox">
                                                <label>
                                                    <input [disabled]="device.raspberryStatus!=1" type="checkbox" class="device-checkbox"> {{device.id}}
                                                </label>
                                            </div>
                                        </td>
                                        <td>{{device.buildingNum}} {{device.classroomNum}}</td>
                                        <td>
                                            <p *ngIf="device.raspberryStreamStatus==0" >离线</p>
                                            <p *ngIf="device.raspberryStreamStatus==1" >在线(空闲)</p>
                                            <p *ngIf="device.raspberryStreamStatus==2" >异常</p>
                                            <p *ngIf="device.raspberryStreamStatus==3" >正在推送本教室视频</p>
                                            <p *ngIf="device.raspberryStreamStatus==4" >正在播放其他教室视频</p>
                                            <p *ngIf="device.raspberryStreamStatus==5" >正在广播</p>
                                        </td>
                                        <td class="table-td">
                                            <div *ngIf="device.raspberryStreamStatus!=3">
                                                <button [disabled]="device.raspberryStreamStatus==4||device.raspberryStreamStatus==5||device.raspberryStatus!=1" type="button" class="btn btn-success btn-xs col push-btn" (click)="operateStream(device.id,'start_push',3,$event)"> 推送本教室视频 </button>  
                                            </div>
                                            <div *ngIf="device.raspberryStreamStatus==3">
                                                <button type="button" class="btn btn-success btn-xs col push-btn" (click)="operateStream(device.id,'stop_push',1,$event)"> 停止推送视频 </button>  
                                            </div>
                                             
                                        </td>
                                        <td class="table-td">
                                            <div *ngIf="device.raspberryStreamStatus!=4">
                                                <button [disabled]="device.raspberryStreamStatus==3||device.raspberryStreamStatus==5||device.raspberryStatus!=1" type="button" class="btn btn-success btn-xs col pull-btn" data-toggle="modal" data-target="#pullModal" (click)="getBuildClass(device.id,$event,'single')"> 播放其他教室视频 </button>  
                                            </div>
                                            <div *ngIf="device.raspberryStreamStatus==4">
                                                <button type="button" class="btn btn-success btn-xs col pull-btn" (click)="operateStream(device.id,'stop_pull',1,$event)"> 停止播放视频 </button>  
                                            </div>
                                        </td>
                                        <td class="table-td">
                                            <div *ngIf="device.raspberryStreamStatus!=5">
                                                <button [disabled]="device.raspberryStreamStatus==3||device.raspberryStreamStatus==4||device.raspberryStatus!=1" type="button" class="btn btn-warning btn-xs col broadcast-btn" (click)="operateStream(device.id,'start_broadcast',5,$event)"> 发布广播 </button>
                                            </div>
                                            <div *ngIf="device.raspberryStreamStatus==5">
                                                <button type="button" class="btn btn-warning btn-xs col broadcast-btn" (click)="operateStream(device.id,'stop_broadcast',1,$event)"> 停止广播 </button>
                                            </div>
                                        </td>
                                        <td class="table-td">
                                            <a [routerLink]="['/videoLive']" [queryParams]= "{id:device.id}"  target="_blank" class="btn btn-primary btn-xs col">播放视频</a>
                                        </td>                                    
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="7">
                                            <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

<!-- pullModal -->
<div class="modal fade" id="pullModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="pullModalLabel">选择教室播放视频</h4>
            </div>
            <div class="modal-body">
                <div class="modal-width">
                    <!-- form start -->
                    <form class="form-horizontal">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="chooseBuilding" class="col-sm-12"> ● 正在推送视频的教室</label>
                            </div>
                            <div class="form-group">
                                <label for="chooseBuilding" class="col-sm-2 control-label">教学楼</label>
                                <div class="col-sm-4">
                                    <select class="form-control" name="buildModel" [(ngModel)]="buildModel" (ngModelChange)="changeClassroomByBuilding($event)">
                                        <option *ngFor="let building of buildings" [value]="building.buildingNum">
                                            {{building.buildingNum}}
                                        </option>
                                    </select>
                                </div>

                                <label for="chooseClassroom" class="col-sm-2 control-label">教室号</label>

                                <div class="col-sm-4">
                                    <select class="form-control" id="chooseClassroom" name="classModel" [(ngModel)]="classModel">
                                        <option *ngFor="let classroom of classrooms" [value]="classroom.classroomNum">
                                            {{classroom.classroomNum}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <!-- select -->
                            <div class="form-group" [ngClass]="{'div-display': judgeFrom}">
                                <label for="chooseBuilding" class="col-sm-12"> ● 选择教室播放视频</label>
                            </div>
                            <div class="form-group" [ngClass]="{'div-display': judgeFrom}" id="buildClassSelect">
                                <label class="col-sm-2 control-label">多教室</label>
                                <div class="col-sm-10">
                                    <ul id="ztree" class="ztree"></ul>
                                    
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <p class="label label-danger delete-wrong-tip" [ngClass]="{'div-display': judgeRight}" style="margin-top: 5px;float: left;" >请选择教学楼教室！</p>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" [ngClass]="{'div-display': !judgeFrom}" (click)="startPullOperate()" id="modalStartPullBtn" data-dismiss="modal">确认</button>
                <button type="button" class="btn btn-primary" [ngClass]="{'div-display': judgeFrom}"  (click)="GetCheckedAll()" data-dismiss="modal">确认</button>
            </div>
        </div>
    </div>
</div>
